<template>
    <div class="common-layout">
        <el-container class="main-container">
            <el-header class="main-header">Header</el-header>
            <el-container>
                <el-aside width="200px" class="main-aside">
                    <div class="aside-item" v-for="item in asideData" :key="item.key" @click="handlerAside(item)">
                        {{ item.name || '--' }}
                    </div>
                </el-aside>
                <el-main>
                    <component :is="currentTab"></component>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import routerConfig from '@/router/config';
import VueLearn from '@/view/vue-learn/index.vue';
import BrowerLearn from '@/view/brower-learn/index.vue';


const asideData = reactive([]);
const currentTab = ref(VueLearn);

const handlerAside = (item) => {
    if (item.key === 'vue-learn') {
        currentTab.value = VueLearn;
    } else if (item.key === 'brower-learn') {
        currentTab.value = BrowerLearn;
    } else {
        currentTab.value = VueLearn;
    }
}

onMounted(() => {
    routerConfig.forEach(item => {
        if (item?.meta) {
            asideData.push({
                name: item.meta.title,
                key: item.name
            })
        }
    })
});
</script>
<style lang="less" scoped>
.common-layout {
    width: 100%;
    height: 100%;
    font-size: 16px;
    .main-container {
        width: 100%;
        height: 100%;
    }
    .main-header {
        background-color: #c6e2ff;
    }
    .main-aside {
        display: flex;
        flex-direction: column;
        align-items: left;
        background-color: #d3dce6;
        .aside-item {
            padding: 10px;
        }
        .aside-item:hover {
            background-color: #fff;
            cursor: pointer;
        }
    }
}
</style>